import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import BodyChild from './bodychild';
import ReactMixin from 'react-mixin';
import MixinLog from './mixins';

/**
 * 定义默认属性
 * @type {{username: string}}
 */
const defaultProps = {
    username: '这是默认的用户名'
}

export default class BodyIndex extends React.Component {

    constructor() {
        super(); //调用基类的所有的初始化方法
        this.state = {
            username: 'Parry',
            age: 20
        }
    }

    changeUserInfo(age) {
        this.setState({age: age});

        //获取DOM节点 第一种方式
        // var mySubmitBotton = document.getElementById('subl');
        // console.log(mySubmitBotton);
        // ReactDOM.findDOMNode(mySubmitBotton).style.color = 'red'

        //获取DOM节点 第二种方式 refs
        this.refs.subl.style.color = 'red';
        MixinLog.log();
    }

    handleChildValueChange(event) {
        this.setState({
            age: event.target.value
        })
    }

    render() {
        setTimeout(() => {
            //更改state的时候
            this.setState({
                username: 'sky'
            });
        }, 3000);

        return (
            <div>
                <h3>这里是内容区.</h3>
                <p>{this.state.username}</p>
                <p>{this.state.age}</p>
                <input type="button" id='subl' ref='subl' value='提交' onClick={this.changeUserInfo.bind(this, 100)}/>
                <p>接收到的父页面的属性：{this.props.userid}&nbsp;&nbsp;&nbsp;{this.props.username}</p>
                <BodyChild {...this.props} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
            </div>
        )
    }
}

/**
 * 定义传的属性类型
 * @type {{userid: *}}
 */
BodyIndex.propTypes = {
    //isRequired 必传
    userid: PropTypes.number.isRequired
}

/**
 * 如果父页面没有传递属性 则使用默认属性
 * @type {{username: string}}
 */
BodyIndex.defaultProps = defaultProps;

ReactMixin(BodyIndex.propTypes,MixinLog);